<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="renderer" content="webkit">

    <link rel="stylesheet" type="text/css" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css">
    <link rel="stylesheet" href="css/index.css" />
    <script type="text/javascript" src="../common/jquery-3.7.1.js"></script>
    <script type="text/javascript" src="../common/echarts.min.js"></script>
    <title>配送计划完成进度看板</title>
</head>

<body>
    <div class="border-container">
        <div class="outer-container">
            <div class="name-title tile-color">
                配送计划完成进度看板
            </div>
            <div class="main-container">
                <div class="main-left">
                    <div class="container-title tile-size-color">
                        当日配送任务
                    </div>
                    <div class="process-table">
                        <div class="process-th">
                            <span style="width: 18%;">AO编码</span>
                            <span style="width: 18%;">AO条码</span>
                            <span style="width: 16%;">AO站位</span>
                            <span style="width: 18%;">托盘号</span>
                            <span style="width: 15%;">分拣状态</span>
                            <span style="width: 15%;">任务状态</span>
                        </div>
                        <div class="process-td">
                        </div>
                    </div>
                </div>
                <div class="main-right">
                    <div class="container-title tile-size-color">
                        当日配送计划统计
                    </div>
                    <div class="right-top">
                        <div class="right-top-table">
                            <div class="right-top-th">
                                <span style="width: 33.33%;">计划数</span>
                                <span style="width: 33.33%;">完成数</span>
                                <span style="width: 33.33%;">未完成数</span>
                            </div>
                            <div class="right-top-td">
                            </div>
                        </div>
                    </div>
                    <div class="right-bottom" id="rightPieChart">
                        <div id="pieChart"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function () {
            let scrollInterval;
            let finishingRate;
            // 生成符合格式 XX-NNN-NNNN 的字符串
            function generateCode() {
                const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
                const randomLetter1 = letters[Math.floor(Math.random() * letters.length)];
                const randomLetter2 = letters[Math.floor(Math.random() * letters.length)];
                const numberPart1 = Math.floor(Math.random() * 1000).toString().padStart(3, '0');
                const numberPart2 = Math.floor(Math.random() * 10000).toString().padStart(4, '0');
                return `${randomLetter1}${randomLetter2}-${numberPart1}-${numberPart2}`;
            }

            const generateRandomData = () => {
                const processList = [];
                const numberOfEntries = Math.floor(Math.random() * 51) + 50; // 生成50到100之间的随机数

                for (let i = 0; i < numberOfEntries; i++) {
                    const AOCode = generateCode();
                    const AOBarCode = i + 1 + '_' + numberOfEntries;
                    const AOStation = Math.floor(Math.random() * 10000) + 1;
                    const trayCode = '1001' + (Math.floor(Math.random() * 100000) + 1).toString().padStart(5, '0');
                    const sortingState = 301;
                    const taskState = Math.random() < 0.8 ? '已完成' : '未完成'; // 随机生成任务状态;
                    processList.push({ AOCode, AOBarCode, AOStation, trayCode, sortingState, taskState });
                }

                return processList;
            };

            const generateRandomData2 = (processList) => {
                const rightTopList = [];
                const planCount = processList.length;
                const finishCount = processList.filter(item => item.taskState === '已完成').length;
                const unfinishedCount = processList.filter(item => item.taskState === '未完成').length;
                rightTopList.push({ planCount, finishCount, unfinishedCount });
                finishingRate = planCount < finishCount ? 100 : Math.round(finishCount/planCount*100);
                return rightTopList;
            };

            const updateTable = (processList) => {
                let processHtml = '<ul class="list">';
                processList.forEach(element => {
                    const rowClass = element.taskState === '未完成' ? 'red-row' : '';
                    processHtml += `<li class="item ${rowClass}">
                    <span style="width:18%;">${element.AOCode}</span>
                    <span style="width:18%;">${element.AOBarCode}</span>
                    <span style="width:16%;">${element.AOStation}</span>
                    <span style="width:18%;">${element.trayCode}</span>
                    <span style="width:15%;">${element.sortingState}</span>
                    <span style="width:15%;">${element.taskState}</span>
                    </li>`;
                });
                processHtml += '</ul>';

                const $processTd = $(".process-td");

                $processTd.html(processHtml);

                var containerHeight = $processTd.height();
                var itemHeight = $processTd.find('li').outerHeight(true);

                if (processList.length > Math.round(containerHeight / itemHeight)) {
                    let a = 0;
                    const ls = $processTd.find('li').length;
                    scrollInterval = setInterval(function () {
                        a++;
                        if (a >= ls) {
                            clearInterval(scrollInterval);
                            // 重置滚动位置
                            $processTd.find('ul').stop().css({ marginTop: 0 });
                            // 触发数据刷新
                            boardCreate();
                        } else {
                            $processTd.find('ul').stop().animate({ marginTop: -itemHeight * a }, 1000, 'linear');
                        }
                    }, 2500);
                }
            };

            const rightTopTable = (rightTopList) => {
                let processHtml = '<ul class="list">';
                rightTopList.forEach(element => {
                    processHtml += `<li class="item">
                    <span style="width:33.33%;">${element.planCount}</span>
                    <span style="width:33.33%;">${element.finishCount}</span>
                    <span style="width:33.33%;">${element.unfinishedCount}</span>
                    </li>`;
                });
                processHtml += '</ul>';

                const $processTd = $(".right-top-td");

                $processTd.html(processHtml);
            };

            var pieChart = echarts.init(document.getElementById('pieChart'));
            const pieCharts = () => {
                var dataStyle = {
                    normal: {
                        label: { show: false },
                        labelLine: { show: false }
                    }
                };
                var placeHolderStyle = {
                    normal: {
                        color: 'rgba(0,0,0,0)',
                        label: { show: false },
                        labelLine: { show: false }
                    }
                };
                var option = {
                    title: {
                        text: `完成度: ${finishingRate}%`,
                        x: 'center',
                        y: 'center',
                        itemGap: 20,
                        textStyle: {
                            color: '#fff',
                            fontFamily: '微软雅黑',
                            fontSize: 25,
                            fontWeight: 'bolder'
                        }
                    },
                    tooltip: {
                        show: true,
                        formatter: "{a} <br/>{b} : {c}%"
                    },
                    legend: {
                        orient: 'vertical',
                        x: document.getElementById('rightPieChart').offsetHeight,
                        y: document.getElementById('rightPieChart').offsetWidth,
                        itemGap: 12,
                        data: []
                    },
                    series: [
                        {
                            name: '完成度',
                            type: 'pie',
                            clockWise: false,
                            radius: [125, 180],
                            itemStyle: dataStyle,
                            data: [
                                {
                                    value: finishingRate,
                                    name: '已完成'
                                },
                                {
                                    value: 100 - finishingRate,
                                    name: 'invisible',
                                    itemStyle: placeHolderStyle
                                }
                            ]
                        }
                    ]
                };
                pieChart.setOption(option)
            };

            const boardCreate = () => {
                const processList = generateRandomData();
                const rightTopList = generateRandomData2(processList);
                pieCharts();
                updateTable(processList);
                rightTopTable(rightTopList);
            };

            boardCreate();

            // 设置定时器，每10分钟更新一次数据
            // setInterval(boardCreate, 10 * 1000);
        });
    </script>
</body>

</html>